﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/effects</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
            div {
                margin: 3px;
                width: 50px;
                height: 50px;
                /*position: absolute;*/
                left: 10px;
                top: 300px;
                background-color: yellow;
                /*display:none;*/
            }
            div.newcolor {
                background-color: red;
            }
  		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		    console.log( "jQuery version: " + $.fn.jquery );
        </script>
    </head>
    <body>
        <h1>jQuery/effects部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">.queue()</td>
                <td>see data part.</td>
            </tr>
            <tr>
                <td class="syntax">.clearQueue()</td>
                <td>see data part.</td>
            </tr>
            <tr>
                <td class="syntax">.dequeue()</td>
                <td>see data part.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.fx.interval</td>
                <td>in ms. the rate of animation</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.fx.off</td>
                <td>disable all animations.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.speed</td>
                <td>创建一个object, 携带animation options.</td>
            </tr>
            <tr>
                <td class="syntax">.animate()</td>
                <td>施加于css property上的动画.</td>
            </tr>
            <tr>
                <td class="syntax">.finish()</td>
                <td>跳过动画和queue, 直达终点值.</td>
            </tr>
            <tr>
                <td class="syntax">.stop()</td>
                <td>stop currently-running animation.</td>
            </tr>
            <tr>
                <td class="syntax">.delay()</td>
                <td>延迟时间设置.</td>
            </tr>
            <tr>
                <td class="syntax">.fadeIn()</td>
                <td>淡入</td>
            </tr>
            <tr>
                <td class="syntax">.fadeOut()</td>
                <td>淡出</td>
            </tr>
            <tr>
                <td class="syntax">.fadeTo()</td>
                <td>调整opacity到指定值.</td>
            </tr>
            <tr>
                <td class="syntax">.fadeToggle()</td>
                <td>切换show/hide.</td>
            </tr>
            <tr>
                <td class="syntax">.show()</td>
                <td>show.</td>
            </tr>
            <tr>
                <td class="syntax">.hide()</td>
                <td>hide.</td>
            </tr>
            <tr>
                <td class="syntax">.toggle()</td>
                <td>display or hide.</td>
            </tr>
            <tr>
                <td class="syntax">.slideDown()</td>
                <td>display by sliding down</td>
            </tr>
            <tr>
                <td class="syntax">.slideToggle()</td>
                <td>display or hide by sliding </td>
            </tr>
            <tr>
                <td class="syntax">.slideUp()</td>
                <td>hide by sliding up.</td>
            </tr>
        </table>
        <p></p>
    <hr/>
    请打开console观察输出.
    
    
    <button id="idSlide">slide up/down</button>
    <button id="idHide">show/hide</button>
    <button id="idFade">fade in/out</button>

    <div id="d1">1</div>
    <div id="d2">2</div>
    <div id="d3">3</div>
    <div id="d4">4</div>

    <script>
        $("#idSlide").click(function(){
            var d = $("#d1");
            if(d.is(":hidden")){
                d.slideDown();
            }
            else {
                d.slideUp();
            }
        });
        $("#idHide").click(function(){
                var d = $("#d2");
                if(d.is(":hidden")){
                    d.show();
                }
                else {
                    d.hide();
                }
        });
        $("#idFade").click(function(){
                var d = $("#d3");
                if(d.is(":hidden")){
                    d.fadeIn();
                }
                else {
                    d.fadeOut();
                }
        });
    </script>

    </body>
</html>
